<template>
	<view :class="['popBox',animation?'ani':'']"  v-if="showPoup" @touchmove.stop :style="{paddingTop:pdTop+'px'}">
		<scroll-view class="areaBox" show-scrollbar="true" scroll-y="true" :style="{height:scHeight+'px'}"   @touchmove.stop>
			<text :class="[showFujin?'active':'']" @tap="fujin">附近</text>
			<block v-for="(item,index) in area[sfIndex][ctIndex]" :key="index">
				<text :data-id="item.value" :class="[item.value==selectArea?'active':'']" @tap="getBusCircle(index)">{{item.label}}</text>
			</block>
			
			
		</scroll-view>
		<scroll-view class="squareBox" v-if="!showFujin"  scroll-y="true" :style="{height:scHeight+'px'}"   @touchmove.stop.prevent>
			<text @tap="choseArea">{{areaObj.label}}商圈</text>
			<text v-for="(item,index) in circle" :key="index" @tap="selectCircle(index)">{{item.name}}</text>
		</scroll-view>
		<view class="fujinBox" v-if="showFujin">
			<text @tap="close()">1000m</text>
			<text @tap="close()">3000m</text>
			<text @tap="close()">5000m</text>
		</view>
	</view>
</template>

<script>
	import area from "@/components/citySelect/city-data/area.js";
	import city from "@/components/citySelect/city-data/city.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'areaPopup2',
		computed:{
			...mapState({
				locationCity:state=>state.map.locationCity,
				selectCity:state=>state.map.selectCity
			})
		},
		props: {
			show: {
				type: Boolean,
				default: true
			},
			scHeight:{
				type:Number,
				default:0
			},
			isFiexd:{
				type:Boolean,
				default:false
			}
			
		},
		data() {
			return {
				showPoup:false,
				animation:false,
				pdTop:uni.getSystemInfoSync().statusBarHeight+uni.upx2px(168),
				showFujin:true,		//是否显示附近
				area:[],
				city:[],
				ctIndex:0,
				areaIndex:0,
				sfIndex:0,
				circle:[],
				selectArea:null,
				areaObj:{}
			}
		},
		watch:{
			selectCity(newVal){
				this.getQuyu();
			}
		},
		methods: {
			clear() {},
			open() {
				uni.hideTabBar({});			//隐藏底部tabbar
				this.showPoup = true;
				this.$emit('change', {
					show: true
				})
				setTimeout(()=>{
					this.animation=true
				},30)
				
				
			},
			close() {
				this.animation=false;
				setTimeout(()=>{
					uni.showTabBar({})			//显示底部tabbar
					this.showPoup = false
					this.$emit('change', {
						show: false
					})
				},300)
				
				
				
			},
			fujin(){
				this.showFujin=true;
				this.selectArea=null;
			},
			getBusCircle(e){
				e=parseInt(e)
				this.selectArea=area[this.sfIndex][this.ctIndex][e].value;
				this.areaObj=area[this.sfIndex][this.ctIndex][e];
				this.showFujin=false;
				this.$store.dispatch("apiGetBusCircle",this.selectArea)
				.then(res=>{
					this.circle=res.data.data
					
				})
			},
			// 选择商圈
			selectCircle(e){
				let _name=this.circle[e].name.substr(0,4);
				uni.$emit("changeStreet2",{
					streetId:this.circle[e].id,
					streetName:_name,
					areaId:this.areaObj.value
				})
				this.close();
				
			},
			// 选择区域
			choseArea(){
				let _name=this.areaObj.label.substr(0,4)
				uni.$emit("changeArea2",{
					areaId:this.areaObj.value,
					areaName:this.areaObj.label.substr(0,4)
					
				})
				this.close();
			},
			getQuyu(){
				let _this=this;
				this.area=area;
				let cityName=this.selectCity.cityCode.toString()
				city.forEach((item,n)=>{
					// console.log(item);
					item.forEach((i,m)=>{
						// console.log(i);
						if(i.value==cityName){
							
							// console.log(x);
							_this.ctIndex=m;
							_this.sfIndex=n;
						}
						
					})
				})
			}

		},
		created(){
			setTimeout(()=>{
				this.getQuyu()
			},1000)
			
		},
		
		
	}
</script>
<style lang="less" scoped>
	@import "../../common/public.less";
	
	.popBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 0%;
		background-color: rgba(0,0,0,0.5);
		padding-top: 75upx;
		z-index: 980;
		display: flex;
		overflow: hidden;
		transition: all 0.3s; 
		
		text{
			display: block;
			width: 100%;
			font-size: 32upx;
			color: #333333;
			line-height: 80upx;
			border-left: 2upx solid rgba(0,0,0,0);
			border-bottom: 1px solid #efefef;
			padding-left: 20upx;
		}
		
		.areaBox{
			width: 30%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			border-top: 1px solid #EFEFEF;
			.active{
				color: #ffcd11;
				border-left: 2upx solid #ffcd11;
			}
		}
		.squareBox{
			width:70%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			border-top: 1px solid #EFEFEF;
			padding-left: 20upx;
		}
	}
	.ani {
		height: 100%;
		
	}
	.aniDely {
		height: 100%;
		transition-property: all ;
		transition-duration: 1s;
		transition-timing-function: linear;
		transition-delay: 0.3s;
	}
	.fujinBox{
		border-top: 1px solid #EFEFEF;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		background-color: #FFFFFF;
	}
</style>
